<template>
	<view class="goods-list">
		<view class="item dir-left-nowrap" :class="key !== goods_list.length ? 'item-border' : ''"
			v-for="(item, key) in goods_list" :key="key" @click="route_go(item)">
			<view class="box-grow-0 cover-pic">
				<image class="pic" :src="item.cover_pic"></image>
				<view class="out-dialog" v-if="item.goods_stock == 0 && appSetting.is_show_stock == '1'">
					<image mode="aspectFill"
						:src="appSetting.is_use_stock == '1' ? appImg.plugins_out : appSetting.sell_out_pic"></image>
				</view>
				<view class="out-miaosha" v-if="item.sign == 'miaosha'" :class="theme + '-m-back ' + theme">
					秒杀商品
				</view>
			</view>
			<view class="cont dir-top-nowrap main-between">
				<text class="name t-omit-two">{{item.name}}</text>
				<view>
					<!-- <view class="box-grow-0 cross-bottom" v-if="item.is_level == 1 && item.is_negotiable != 1">
						<app-member-price :price="item.level_price"></app-member-price>
					</view>
					<app-sup-vip class="margin-vip" :is_vip_card_user="item.vip_card_appoint.is_vip_card_user"
						v-if="item.vip_card_appoint.discount" :discount="item.vip_card_appoint.discount">
					</app-sup-vip> -->
					<view class="price-but dir-left-nowrap main-between cross-center">
						<view class="price dir-top-nowrap">
							<text class="price_content" :class="theme+ '-m-text ' + theme">
								{{item.sign == 'miaosha' ? '秒杀价' : '售价'}}：{{item.price_content}}</text>
							<!-- <text class="sales">{{item.sales}}</text> -->
						</view>
						<view class="but">
							<view
								v-if="(item.is_negotiable != 1 && item.goods_stock > 0 && item.sign == '') || (item.is_negotiable != 1 && item.goods_stock > 0 && item.sign == 'miaosha' && item.msdetail.miaosha_status == 1)"
								class="box-grow-0 cart-box">
								<view class="goods-cart">
									<cats-image @click.stop.native="specification(item)" :theme="theme"></cats-image>
								</view>
							</view>
							<view class="butgray" v-if="item.sign == 'miaosha' && item.msdetail.miaosha_status == 0">
								已结束
							</view>
							<view class="butgray" v-if="item.sign == 'miaosha' && item.msdetail.miaosha_status == 2">
								未开始
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import catsImage from './cats-image.vue';

	export default {
		name: "goods-list",
		props: [`goods_list`, `theme`],
		components: {
			catsImage
		},
		data() {
			return {
				previewUrl: '',
				submitUrl: '',
				attrGroup: [],
				selectAttr: {},
				item: {},
				show: 0
			}
		},
		computed: {
			...mapGetters('mallConfig', {
				getVideo: 'getVideo',
				isShowCart: 'getShowCart'
			}),
			...mapState({
				appSetting: state => state.mallConfig.mall.setting,
				appImg: state => state.mallConfig.__wxapp_img.mall,
			})
		},
		methods: {
			specification(goods) {
				if (goods.sign === 'mch') {
					this.previewUrl = this.$apiSol.mch.order_preview;
					this.submitUrl = this.$apiSol.mch.order_submit;
				} else {
					this.previewUrl = '';
					this.submitUrl = '';
				}
				this.$emit('attr', this.previewUrl, this.submitUrl, goods.attr_groups, goods);
			},

			route_go(item) {
				// #ifndef MP-BAIDU
				/* if (item.video_url && this.getVideo == 1) {
					uni.navigateTo({
						url: `/pages/goods/video?goods_id=${item.id}&sign=${item.sign}`
					});
				} else {
					uni.navigateTo({
						url: item.page_url
					});
				} */
				// #endif
				uni.navigateTo({
					url: '/plugins/mch_solitaire/togoods/togoods?id=' + item.id
				})
				// #ifdef MP-BAIDU
				uni.navigateTo({
					url: item.page_url
				});
				// #endif
			},

			onAttr(data) {
				this.selectAttr = data;
			},
		}
	}
</script>

<style scoped lang="scss">
	.cover-pic {
		position: relative;
		border-radius: #{8upx};
		margin-right: #{20upx};
	}

	.out-miaosha {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 200rpx;
		height: 30rpx;
		color: #FFF;
		font-size: 16rpx;
		text-align: center;
		line-height: 30rpx;
	}

	.out-dialog {
		width: #{200upx};
		height: #{200upx};
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{200upx};
			height: #{200upx};
		}
	}

	.goods-list {
		background-color: #ffffff;
	}

	.item {
		width: #{750upx};
		padding: #{0 24upx};
		background-color: #ffffff;
		margin: #{20upx 0};
	}

	.item-border {
		border-bottom: #{1upx} solid #e2e2e2;
	}

	.cover-pic {
		width: #{200upx};
		height: #{200upx};
		border-radius: #{8upx};
		margin-right: #{20upx};
		position: relative;
	}

	.out-dialog {
		width: #{200rpx};
		height: #{200rpx};
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, .5);

		image {
			width: #{200rpx};
			height: #{200rpx};
		}
	}

	.pic {
		width: #{200upx};
		height: #{200upx};

	}

	.cont {
		width: #{480upx};
		min-height: #{200upx};
		margin-bottom: #{20upx};
	}

	.name {
		font-size: #{28upx};
		line-height: 38upx;
		color: #353535;
		margin-top: #{5upx};
	}

	.margin-vip {
		margin: #{8upx 0 0 0};
	}

	.price-but {

		margin-top: #{8upx};
	}

	.price_content {
		font-size: #{32upx};
		line-height: 1;
	}

	.butgray {
		font-size: 24rpx;
		color: #999999;
	}

	.cart-box {
		width:#{56rpx};
		height:#{56rpx};
		border-radius: 50%;
		position: relative;
		transform: rotateZ(360deg);
	}

	.sales {
		font-size: #{20upx};
		line-height: 1;
		color: #999999;
	}

	.goods-cart {
		width:#{56rpx};
		height:#{56rpx};
		border: none;
		background: transparent;
	}
</style>
